<template>
	<div>

		<mt-swipe :auto="4000">

			<mt-swipe-item v-for="item in list" :key="item.image_url"><img :src="item.image_url"></mt-swipe-item>

		</mt-swipe>
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
					<span class="mui-icon">
						<img src="../../images/报告商品-购买力分析.png" />
					</span>
					<div class="mui-media-body">购买商品</div>
				</a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
				<router-link to="/news/list">
					<span class="mui-icon">
						<img src="../../images/新闻资讯.png" />
					</span>
					<div class="mui-media-body">新闻资讯</div>
				</router-link>
			</li>

			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
					<span class="mui-icon">
						<img src="../../images/视频专区.png" />
					</span>
					<div class="mui-media-body">视频专区</div>
				</a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
					<span class="mui-icon">
						<img src="../../images/图片分享.png" />
					</span>
					<div class="mui-media-body">图片分享</div>
				</a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
					<span class="mui-icon">
						<img src="../../images/联系我们.png" />
					</span>
					<div class="mui-media-body">联系我们</div>
				</a></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
					<span class="mui-icon">
						<img src="../../images/留言反馈.png" />
					</span>
					<div class="mui-media-body">留言反馈</div>
				</a></li>

		</ul>
	</div>
</template>

<script>
	import {
		Toast
	} from 'mint-ui';
	export default {
		data() {
			return {
				list: []

			};
		},
		created() {
			this.getLunbo()
		},
		methods: {
			getLunbo() {
				this.$http.get("/api/upload/selectAll").then(result => {
					if (result.status === 200) {
						this.list = result.body
						console.log("运行到这里了")
					} else {
						Toast("请求失败")
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.mint-swipe {
		height: 500px;

		.mint-swipe-item {
			&:nth-child(1) {
				background-color: lightcoral;
			}

			&:nth-child(2) {
				background-color: lightblue;
			}

			&:nth-child(3) {
				background-color: lightgreen;
			}

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	ul {
		padding-top: 50px;

		img {
			width: 80px;
			height: 80px;
		}
	}
</style>
